<template>
    <el-dialog
        custom-class="personnel-selection-container"
        :title="title"
        :visible.sync="show"
        :close-on-click-modal="false"
        append-to-body
        @open="open"
        @closed="afterClose"
        center
        width="880px"
    >
        <div class="options-box">
            <p class="tips" v-if="tips">{{ tips }}</p>
            <el-checkbox-group v-model="selectedList" @change="handleChecked">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane
                        v-for="item in tabs"
                        :label="item.label"
                        :name="item.name"
                        :key="item.name"
                    >
                        <div class="content-box">
                            <div class="content-handle">
                                <el-input
                                    class="filter-input"
                                    placeholder="搜索内容"
                                    size="mini"
                                    prefix-icon="el-icon-search"
                                    v-model="filterValue"
                                ></el-input>
                                <span
                                    v-if="!isSingle && allBtnShow"
                                    class="check-all"
                                    :class="[
                                        {
                                            default:
                                                !checkAll && !isIndeterminate,
                                        },
                                        {
                                            checkAll:
                                                checkAll && !isIndeterminate,
                                        },
                                        {
                                            check: !checkAll && isIndeterminate,
                                        },
                                    ]"
                                    @click="handleClickCheck"
                                    >全选</span
                                >
                            </div>
                            <template
                                v-if="
                                    filterOptionsList.length &&
                                    Array.isArray(filterOptionsList[0])
                                "
                            >
                                <div class="content-handle-group-box">
                                    <div
                                        v-for="(it, indx) in filterOptionsList"
                                        :key="indx"
                                        class="content-handle-group-item"
                                    >
                                        <p class="checkbox-title">
                                            {{ it[0].governmentName }}
                                        </p>
                                        <div class="check-box">
                                            <p v-for="i in it" :key="i.id">
                                                <el-checkbox
                                                    :label="i.id"
                                                    :disabled="
                                                        disabledIdList.includes(
                                                            i.id
                                                        )
                                                    "
                                                    @change="
                                                        changeSelect($event, i)
                                                    "
                                                    >{{ i.name }}</el-checkbox
                                                >
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <el-checkbox
                                    v-for="it in filterOptionsList"
                                    :label="it.id"
                                    :key="it.id"
                                    :disabled="disabledIdList.includes(it.id)"
                                    @change="changeSelect($event, it)"
                                >
                                    {{ it.name }}
                                </el-checkbox>
                            </template>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-checkbox-group>
        </div>
        <div class="selected-box">
            <p class="box-title">已选</p>
            <badge-delete-box
                :list="selectedItemList"
                @deleteItem="deleteItem"
            />
        </div>
        <div class="btn-box">
            <el-button @click="close">取消</el-button>
            <el-button v-if="!readOnly" type="primary" @click="save"
                >确认</el-button
            >
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BadgeDeleteBox from "@/components/badge-delete-box/index.vue";

@Component({
    components: {
        BadgeDeleteBox
    }
})
export default class PersonSelection extends Vue {
    // 显示弹框
    show = false;
    // tabs显示
    activeName = "";
    // 当前选中列表
    selectedList: any = [];
    // 当前选中对象列表
    selectedItemList: any = [];
    // 选项列表
    optionsList = [];
    // 是否单选
    isSingle = false;
    // tabs内容
    tabs: any = [];
    // 搜索内容
    filterValue = "";
    // 是否只读
    readOnly = false;
    allBtnShow = false;

    // 实现全选的效果 false要么全选 要么全不选 初始时全不选
    isIndeterminate = false;
    // 是否全选
    checkAll = false;
    title = "";
    tips = "";
    // 禁用的id
    disabledIdList: any[] = [];

    get filterOptionsList() {
        if (this.optionsList.length && Array.isArray(this.optionsList[0])) {
            const arr: any[] = [];
            this.optionsList.forEach((item: any) => {
                const curList = item.filter((it: any) =>
                    it.name.includes(this.filterValue)
                );
                if (curList.length) {
                    arr.push(curList);
                }
            });
            return arr;
        }
        return this.optionsList.filter((item: any) =>
            item.name.includes(this.filterValue)
        );
    }

    // 所有人员的id列表
    get IdList(): any {
        const IdList: any[] = [];
        this.filterOptionsList.forEach((item: any) => {
            if (item.id) {
                IdList.push(item.id);
            } else {
                item.forEach((subItem: any) => {
                    IdList.push(subItem.id);
                });
            }
        });
        return IdList;
    }

    // 所有人员的数组列表
    get itemNameList(): any {
        const itemList: any[] = [];
        this.filterOptionsList.forEach((item: any) => {
            if (item.id) {
                itemList.push(item);
            } else {
                item.forEach((subItem: any) => {
                    itemList.push(subItem);
                });
            }
        });
        return itemList;
    }

    // 点击全选
    handleClickCheck() {
        // 不是当前标签选中的
        const notTypeId: any = this.selectedList.filter(
            (item: any) => !this.IdList.includes(item)
        );
        // 不是当前标签选中的
        const notTypeItem: any = [];
        this.selectedItemList.forEach((item: any) => {
            if (
                this.itemNameList.findIndex(
                    (cur: any) => cur.id === item.id
                ) === -1
            ) {
                notTypeItem.push(item);
            }
        });

        this.checkAll = !this.checkAll;
        this.isIndeterminate = false;
        this.selectedList = this.checkAll
            ? [].concat([], this.IdList, notTypeId)
            : notTypeId;
        this.selectedItemList = this.checkAll
            ? [].concat([], this.itemNameList, notTypeItem)
            : notTypeItem;
    }

    // 点击复选框
    handleChecked(value: any = this.selectedList) {
        const inTypeId = value.filter((item: any) =>
            this.IdList.includes(item)
        );
        const checkedCount = inTypeId.length;
        this.checkAll = checkedCount === this.IdList.length;
        this.isIndeterminate =
            checkedCount > 0 && checkedCount < this.IdList.length;
    }

    // 打开
    open() {
        this.show = true;
        this.activeName = this.tabs[0].name;
        this.$emit("getOptions", {
            name: this.activeName,
            type: this.tabs[0].type
        });
    }

    // 获取选项内容
    getOptions(data: any) {
        this.optionsList = data;
        this.handleChecked();
    }

    // 切换标签页
    handleClick(tab: any) {
        this.$emit("getOptions", {
            name: tab.name,
            type: this.tabs.filter((item: any) => item.name === tab.name)[0]
                .type
        });
    }

    // 选中变化
    changeSelect(val: any, item: any) {
        if (val) {
            // 选中
            if (this.isSingle) {
                // 单选
                this.selectedList = [item.id];
                this.selectedItemList = [item];
            } else {
                // 多选
                this.selectedItemList.push(item);
            }
        } else {
            // 没选中
            this.deleteItem(item);
        }
    }

    // 删除选中
    deleteItem(data: any) {
        const idIndex = this.selectedList.findIndex(
            (item: any) => item === data.id
        );
        if (idIndex !== -1) {
            this.selectedList.splice(idIndex, 1);
        }
        const itemIndex = this.selectedItemList.findIndex(
            (item: any) => item.id === data.id
        );
        if (itemIndex !== -1) {
            this.selectedItemList.splice(itemIndex, 1);
        }
        this.handleChecked();
    }

    // 取消
    close() {
        this.show = false;
    }

    // 保存
    save() {
        this.$emit("sure", {
            selectedList: this.selectedList,
            selectedItemList: this.selectedItemList
        });
    }

    // 关闭完成
    afterClose() {
        this.selectedList = [];
        this.selectedItemList = [];
        this.$nextTick(function() {
            this.$el.remove && this.$el.remove();
        });
        this.$emit("close");
    }
}
</script>

<style lang="scss">
.personnel-selection-container {
    margin-top: 10vh !important;
    .el-dialog__header {
        padding-bottom: 0;
    }
    .el-dialog__body {
        padding-top: 0 !important;
    }
}
</style>
<style lang="scss" scoped>
.options-box {
    .tips {
        padding-left: calc(50% - 36px);
        color: #a5a5a5;
        margin-top: 4px;
    }
    /deep/.el-tab-pane {
        max-height: 460px;
        overflow: auto;
        margin-bottom: 24px;
    }
    .content-box {
        background: #fafafa;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13);
        opacity: 1;
        border-radius: 4px;
        padding: 20px 24px;
        .content-handle {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            .filter-input {
                display: block;
                width: 200px;
            }
            .check-all {
                cursor: pointer;
                display: block;
                margin-bottom: 0;
                margin-left: 16px;
                width: 52px;
                height: 20px;
                line-height: 20px;
                color: #606266;
                font-size: 14px;
                text-align: right;
                position: relative;
                background-size: 14px 14px;
                background-position: left center;
                background-repeat: no-repeat;

                &.default {
                    background-image: url("~@/assets/icon/default-bg.png");
                }
                &.checkAll {
                    background-image: url("~@/assets/icon/isActive.png");
                    color: #de2728 !important;
                }
                &.check {
                    background-image: url("~@/assets/icon/check.png");
                }
            }
        }
        .content-handle-group-box {
            @include flexLayout(flex, normal, normal);
            flex-wrap: wrap;
            .content-handle-group-item {
                width: 120px;
                margin-right: 10px;
                margin-bottom: 20px;
                .check-box {
                    max-height: 300px;
                    overflow-y: auto;
                }
            }
        }
        .el-checkbox {
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
            color: #9da1a4;
            margin-bottom: 4px;
            @include flexLayout(flex, normal, center);
            display: inline-flex;
            ::v-deep {
                .el-checkbox__label {
                    max-width: 200px;
                    @include textEllipsis();
                }
            }
        }
        .checkbox-title {
            width: 100%;
            @include textEllipsis();
            font-size: 14px;
            margin: 0 0 10px 0;
        }
    }
}
.selected-box {
    background: #fafafa;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13);
    opacity: 1;
    border-radius: 4px;
    padding: 0 24px 24px;
    margin-bottom: 24px;
    .box-title {
        font-size: 16px;
        line-height: 46px;
        margin: 0;
        color: #37383a;
        border-bottom: 1px solid #e4ebf1;
    }
}
.btn-box {
    text-align: right;
}
</style>
